<script setup lang="ts">
import 'sakana-widget/lib/index.css';
import SakanaWidget from 'sakana-widget';
import { useData } from "vitepress";
import DefaultTheme, { useSidebar } from "vitepress/theme";
import { nextTick, onMounted, provide } from "vue";
const Layout = DefaultTheme.Layout;
const { isDark } = useData();
const { hasSidebar } = useSidebar();
function initSakanaWidget() {
  // const pixiv = SakanaWidget.getCharacter('chisato');
  // console.log(pixiv);
  
  // pixiv!.image = '/blog/pixiv.jpg'
  // SakanaWidget.registerCharacter('pixiv', pixiv);
  new SakanaWidget({ autoFit: true, character: 'chisato', controls: false, rod: true })
    .setState({ i: 0.001, d: 0.99 })
    .mount("#sakana-widget");
}
const enableTransitions = () =>
  "startViewTransition" in document &&
  window.matchMedia("(prefers-reduced-motion: no-preference)").matches;

provide("toggle-appearance", async ({ clientX: x, clientY: y }: MouseEvent) => {
  if (!enableTransitions()) {
    isDark.value = !isDark.value;
    return;
  }

  const clipPath = [
    `circle(0px at ${x}px ${y}px)`,
    `circle(${Math.hypot(
      Math.max(x, innerWidth - x),
      Math.max(y, innerHeight - y)
    )}px at ${x}px ${y}px)`,
  ];

  await document.startViewTransition(async () => {
    isDark.value = !isDark.value;
    await nextTick();
  }).ready;

  document.documentElement.animate(
    { clipPath: isDark.value ? clipPath.reverse() : clipPath },
    {
      duration: 300,
      easing: "ease-in",
      pseudoElement: `::view-transition-${isDark.value ? "old" : "new"}(root)`,
    }
  );
});

onMounted(() => {
  initSakanaWidget()
})
</script>

<template>
  <Layout>
    <template #layout-bottom>
      <footer class="VPFooter" :class="{ 'has-sidebar': hasSidebar }">
        <div class="container">
          <p class="message">
            <a
              style="text-decoration: none"
              href="https://beian.miit.gov.cn/"
              target="_blank"
              >苏ICP备2024078841号-1</a
            >
            <br />
            Powered by
            <a
              style="text-decoration: none"
              href="https://vitepress.dev/zh/"
              target="_blank"
              >VitePress</a
            >
            <br />
            本网站由<a
              style="text-decoration: none"
              href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral"
              target="_blank"
              ><img
                style="
                  vertical-align: middle;
                  display: inline-block;
                  margin: 0px 5px 2px 5px;
                "
                src="/upyun_logo.png"
                alt="又拍云"
                width="40"
                height="30" /></a
            >提供CDN加速/云存储服务
          </p>
          <p class="copyright">© 2024 梦想编织屋</p>
        </div>
      </footer>
      <div
        id="sakana-widget"
        style="position: fixed; bottom: 20px; right: 40px; z-index: 10;"
      ></div>
    </template>
  </Layout>
</template>

<style scoped>
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root),
.dark::view-transition-new(root) {
  z-index: 1;
}

::view-transition-new(root),
.dark::view-transition-old(root) {
  z-index: 9999;
}

.VPSwitchAppearance {
  width: 22px !important;
}

.VPSwitchAppearance .check {
  transform: none !important;
}
.VPFooter {
  position: relative;
  z-index: var(--vp-z-index-footer);
  border-top: 1px solid var(--vp-c-gutter);
  padding: 32px 24px;
  background-color: var(--vp-c-bg);
}

.VPFooter.has-sidebar {
  display: none;
}

.VPFooter :deep(a) {
  text-decoration-line: underline;
  text-underline-offset: 2px;
  transition: color 0.25s;
}

.VPFooter :deep(a:hover) {
  color: var(--vp-c-text-1);
}

@media (min-width: 768px) {
  .VPFooter {
    padding: 32px;
  }
}
.container {
  margin: 0 auto;
  max-width: var(--vp-layout-max-width);
  text-align: center;
}

.message,
.copyright {
  line-height: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-text-2);
}
</style>
